<template>
    <div class="flex flex-col">
        <div data-v-0ef3d734="" class="z-10 flex items-center h-12 px-4 py-8 space-x-3 bg-white shrink-0">
            <div class="flex items-center justify-center h-full grow">
                <div class="flex items-center w-full px-2 py-1 bg-gray-100 border rounded-full">
                    <div class="px-2 text-xs grow search-text">
                        <input v-model="keyword" class="w-full h-full bg-transparent outline-none" />
                    </div>
                    <IRiSearch2Line />
                </div>
            </div>
            <div class="flex items-center h-full text-sm text-gray-700 shrink-0" @click="router.back()">
                取消
            </div>
        </div>
        <div class="overflow-y-auto text-sm text-gray-500 grow ">
            <div class="hidden">
                <div class="px-4">
                    <div class="text-base text-gray-700">搜索历史</div>
                    <div class="mt-2 ">
                        <div class="flex items-center py-3 space-x-2 border-b" v-for="(item, index) in 6">
                            <div class=" shrink-0"><IIcon-park-outline:time /></div>
                            <div class=" line-clamp-1">
                                郭靖爱黄蓉郭靖爱黄蓉郭靖爱黄蓉郭靖爱黄蓉郭靖爱黄蓉郭靖爱黄蓉
                            </div>
                            <div class=" shrink-0">
                                <IRi:closeFill />
                            </div>
                        </div>
                        <div class="mt-4 text-center">清空搜索记录</div>
                    </div>
                </div>
                <div class="h-1 my-4 bg-gray-100"></div>
                <div class="px-4">
                    <div class="text-base text-gray-700">热门搜索</div>
                    <div class="grid grid-cols-2 mt-2 gap-x-2">
                        <div v-for="(item, index) in 5" class="flex items-center space-x-1">
                            <IIcomoon-free:fire class="text-4xl text-red-500" />
                            <div class="line-clamp-1">
                                郭靖爱黄蓉郭靖爱黄蓉郭靖爱黄蓉郭靖爱黄蓉郭靖爱黄蓉郭靖爱黄蓉
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="">
                <Tabs full v-model:active="active">
                    <TabItem title="问答">
                        <div class="mt-4 space-y-8">
                            <div v-for="(item, index) in 3">
                                <RouterLink :to="{
                                    name: 'school-detail',
                                    params: {
                                        id: 1
                                    }
                                }">
                                    <div class="flex px-3 text-sm text-gray-700">
                                        <div class="grow">
                                            <div class="text-base line-clamp-1">有哪些食物猫咪不能吃？有哪些食物猫咪不能吃？有哪些食物猫咪不能吃？</div>
                                            <div class="flex items-center mt-1">
                                                <div class="w-6 h-6 overflow-hidden bg-green-100 rounded-full">
                                                    <LazyImage :src="a" />
                                                </div>
                                                <div class="ml-2">
                                                    萌宠救助站
                                                </div>
                                            </div>
                                            <div class="mt-2 text-gray-400 line-clamp-2">
                                                有哪些食物猫咪不能吃？有哪些食物猫咪不能吃？有哪些食物猫咪不能吃？有哪些食物猫咪不能吃？有哪些食物猫咪不能吃？有哪些食物猫咪不能吃？有哪些食物猫咪不能吃？有哪些食物猫咪不能吃？有哪些食物猫咪不能吃？
                                            </div>
                                        </div>
                                        <div class="h-24 ml-2 overflow-hidden rounded-lg w-28 shrink-0">
                                            <LazyImage :src="a" />
                                        </div>
                                    </div>
                                </RouterLink>
                            </div>
                        </div>
                    </TabItem>
                    <TabItem title="商品">
                        <Goods class="px-4 mt-4" :data="goods" />
                    </TabItem>
                    <TabItem title="用户">
                        <div class="p-4 divide-y">
                            <UserCell v-for="(item, index) in 8" class="py-4" />
                        </div>
                    </TabItem>
                    <TabItem title="动态">
                        <Dynamic :data="dynamics" />
                    </TabItem>
                </Tabs>
            </div>
        </div>
    </div>
</template>
    
<script setup lang='ts'>
import a from '~/assets/cat/1.jpeg'
import TabItem from '~/components/tabs/tab-item/index.vue'
import { tmpData } from '~/views/home/tmp';
const router = useRouter();
const route = useRoute()
const goods = ref<any>(tmpData.slice(0, 5))
const keyword = ref<string>('')
const active = ref<number>(0);
const dynamics = ref([{
    goods: [1]
}, {
    goods: [1]
}, {
    goods: [1]
}]);

(() => {
    active.value = [
        'home',
        'shop'
    ].indexOf(route.query.source as string) || 0
    keyword.value = route.query.q as string|| '';
})()

</script>
    
<style></style>